import React,{useEffect} from 'react'
import * as echarts from 'echarts';
export default function Study() {
    useEffect(() => {
        var chartDom = (document.getElementById('mains') as HTMLElement);
        var myChart = echarts.init(chartDom);
        var option;
        
        option = {
           color:["#fff","#fff","#fff","#fff","#fff","#fff","#fff","#fff","#fff","#fff","#fff","#fff","#fff","#fff","#fff","#fff","#fff","#fff"],
          xAxis: {
            type: 'category',
            data: [0, 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22],
            
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [510, 316, 231, 452, 403, 531, 403, 570, 365, 436, 687, 624],
              type: 'line',
              smooth: true
            }
          ]
        };
        
        option && myChart.setOption(option);
    }, [])
    
    
  return (
    <div  style={{ color:"#fff",width:"520px",height:"290px",background:"linear-gradient(to  right bottom,#4067f2  0%, #2fe5f1 100%)",display:"line-block",marginTop:"20px",borderRadius:"20px",padding:"25px",float:"right"}}>
        <p style={{fontSize:"18px"}}>实时学习人数</p>
        <div id='mains' style={{width:"500px",height:"250px",marginTop:"-30px"}}></div>
    </div>
  )
}
